import React, { useEffect, useState } from "react";
import './contract.css';
import AppParams from "@/utils/appParams";
import { LangEn } from "@/utils/langEn";
import { LangFr } from "@/utils/langFr";
import { LangVnd } from "@/utils/langVnd";

/**
 * 合同页
 */
export default function Contract() {

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEn);


    //启动时请求用户状态
    useEffect(() => {
        if (AppParams.lang === "fr") {
            //法语
            setCurLang(LangFr)

        } else if (AppParams.lang === "vi") {
            //越语
            setCurLang(LangVnd)

        } else {
            //英文语
            //setCurLang(LangEn)

            //根据系统判断
            let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            console.log("timeZone:" + timeZone);
            if (timeZone === "Africa/Abidjan") {
                //法语
                setCurLang(LangFr)

            } else if (timeZone === "Africa/Douala") {
                //法语
                setCurLang(LangFr)

            } else if (timeZone === "Asia/Ho_Chi_Minh") {
                //越语
                setCurLang(LangVnd)

            } else if (timeZone === "Asia/Saigon") {
                //越语
                setCurLang(LangVnd)

            } else if (timeZone === "Africa/Kampala") {
                //英文
                setCurLang(LangEn)

            } else if (timeZone === "Africa/Accra") {
                //英文
                setCurLang(LangEn)

            } else if (timeZone === "Africa/Nairobi") {
                //英文
                setCurLang(LangEn)

            } else if (timeZone === "Africa/Lagos") {
                //英文
                setCurLang(LangEn)

            } else {
                //英文
                setCurLang(LangEn)
            }
        }

        //打点
        //doHitEvent("launchmode1_START")

        // return () => {
        //打点
        // doHitEvent("launchmode1_END")
        // }
    }, [])


    return (
        <div className="termsofuseRoot">

            <div className="termsofuseMarginTop16Px termsofusealignCenter">{curLang.header1}</div>
            <div className="termsofuseTableRowContent termsofuseMarginTop16Px">
                <div className="termsofuseTableRowLeft">{curLang.header2}</div>
                <div className="termsofuseTableRowMiddle">{curLang.header3}</div>
                <div className="termsofuseTableRowRight">{curLang.header4}</div>
            </div>
            <div className="termsofuseTableRowContent">
                <div className="termsofuseTableRowLeft">1.</div>
                <div className="termsofuseTableRowMiddle">{curLang.header5}</div>
                <div className="termsofuseTableRowRight">{AppParams.orderId}</div>
            </div>
            <div className="termsofuseTableRowContent">
                <div className="termsofuseTableRowLeft">2.</div>
                <div className="termsofuseTableRowMiddle">{curLang.header6}</div>
                <div className="termsofuseTableRowRight">{AppParams.currentAddress}</div>
            </div>
            <div className="termsofuseTableRowContent">
                <div className="termsofuseTableRowLeft">3.</div>
                <div className="termsofuseTableRowMiddle">{curLang.header7}</div>
                <div className="termsofuseTableRowRight">{AppParams.fullName}</div>
            </div>

            <span className="termsofuseMarginTop16Px">{curLang.header8}</span>
            <span className="termsofuseMarginTop16Px">{curLang.header9}</span>

            <div className="termsofuseMarginTop16Px termsofusealignCenter">{curLang.loanAgreement}</div>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement1}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement2}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement3}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement4}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement5}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement6}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement7}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement8}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement9}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement10}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement11}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement12}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement13}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement14}</span>
            <span className="termsofuseMarginTop16Px">{curLang.loanAgreement15}</span>

            <div className="termsofuseMarginTop16Px termsofusealignCenter">{curLang.termsAndConditions}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions1}</span>
            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions2}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions3}</span>
            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions4}</div>

            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions5}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions6}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions7}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions8}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions9}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions10}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions11}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions12}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions13}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions14}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions15}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions16}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions17}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions18}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions19}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions20}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions21}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions22}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions23}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions24}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions25}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions26}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions27}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions28}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions29}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions30}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions31}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions32}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions33}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions34}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions35}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions36}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions37}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions38}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions39}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions40}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions41}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions42}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions43}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions44}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions45}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions46}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions47}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions48}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions49}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions50}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions51}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions52}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions53}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions54}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions55}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions56}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions57}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions58}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions59}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions60}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions61}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions62}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions63}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions64}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions65}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions66}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions67}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions68}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions69}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions70}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions71}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions72}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions73}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions74}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions75}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions76}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions77}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions78}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions79}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions80}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions81}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions82}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions83}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions84}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions85}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions86}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions87}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions88}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions89}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions90}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions91}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions92}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions93}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions94}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions95}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions96}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions97}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions98}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions99}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions100}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions101}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions102}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions103}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions104}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions105}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions106}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions107}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions108}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions109}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions110}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions111}</span>

            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions112}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions113}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions114}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions115}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions116}</span>


            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions117}</div>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions118}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions119}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions120}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions121}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions122}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions123}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions124}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions125}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions126}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions127}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions128}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions129}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions130}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions131}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions132}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions133}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions134}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions135}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions136}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions137}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions138}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions139}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions140}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions141}</span>
            <span className="termsofuseMarginTop16Px">{curLang.termsAndConditions142}</span>

            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions143}</div>
            <div className="termsofuseMarginTop16Px">{curLang.termsAndConditions144}</div>

            <div className="termsofuseMarginTop16Px termsofuseNameUnderLine">{AppParams.fullName}</div>

        </div >
    )
}